<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: 任静
 * @Date: 2020-11-12 14:19:30
 * @LastEditors: 任静
 * @LastEditTime: 2020-11-13 23:03:26
-->
<template>
  <div class="detail">
    <!-- {{detailList}} -->
    <van-nav-bar
      :title="detailTitle"
      left-text="返回"
      left-arrow
      @click-left="back"
    >
      <template #right>
        <van-icon name="share-o" size="18" />
      </template>
    </van-nav-bar>
    <div class="title">
      <span>排行</span>
      <span>名称</span>
      <span>分数</span>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="list">
        <div
          v-for="(item, index) in detailList"
          :key="item"
          :title="item"
          class="item"
        >
          <span>{{ index + 1 }}</span>
          <span v-for="item1 in item" :key="item1" :title="item1">
            <b v-if="item1.name">{{ item1.name }}</b>
          </span>
          <span>{{ item[1].score }}</span>
        </div>
     
      </div>
    </van-pull-refresh>
    <div class="btns">      <van-tag
          round
          type="primary"
          color="#F7F8FA"
          text-color="#333"
          >我的对比</van-tag
        >  <van-tag
          round
          type="primary"
          color="#F7F8FA"
          text-color="#333"
         @click="savePhoto" >分享图片</van-tag
        ></div>
  </div>
</template>

<script>
import { computed, defineComponent, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Toast } from "vant";
export default defineComponent({
  setup() {
    let route = useRoute();
    let router = useRouter();
    let store = useStore();
    let id = route.query.id;
    let isLoading = ref(false);
    console.log(route, router);
    store.dispatch("home/getDetail", { mid: 0, rankId: id });
    function back() {
      router.go(-1);
    }
    function onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        isLoading = false;
      }, 1000);
    }
    function savePhoto(){
      // {mid:0,rankMode:route.query.id,rankMode:1,dataType:1}
      store.dispatch('classifly/getSavePhoto',0,route.query.id,1,1)
    }
    return {
      detailList: computed(() => store.state.home.detailList),
      detailTitle: computed(() => store.state.home.detailTitle),
      savePhoto,
      back,
    };
  },
});
</script>

<style lang="scss" scoped>
.detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
     box-sizing: border-box;
        padding: 15px;
        background:#F7F8FA;
    span {
      white-space: nowrap;
      text-align: left;
      display: inline-block;
    }
    span:nth-of-type(1) {
      width: 30%;
    }
    span:nth-of-type(2) {
      text-align: left;
      width: 40%;
    }
    span:nth-of-type(3) {
      text-align: right;
      width: 30%;
    }
  }
  .van-pull-refresh {
    flex: 1;
    overflow: scroll;
    .list {
      width: 100%;
      .item {
        width: 100%;
        display: flex;
        justify-content: space-around;
        line-height: 30px;
        box-sizing: border-box;
        padding: 15px;
        span {
          // width:33%;
          white-space: nowrap;
          text-align: left;
        }
        span:nth-of-type(1) {
          width: 30%;
        }
        span:nth-of-type(2) {
          text-align: left;
          width: 40%;
        }
        span:nth-of-type(3) {
          text-align: left;
          width: 30%;
        }
      }
    }
  }
}
.btns{
  display:flex;
  justify-content: space-around;
  align-items: center;
  span{
    text-align: center;
  }
  .van-tag{
    width:15%;
    height:40px;
    padding:0px 60px;
    text-align: center;
    border:1px solid #ccc;
  }
}
</style>